<style>
    form {
        position: relative;
    }

    .form-input .upload a{
        width: 80px;
        height: 36px;
        background-color: #2E9FFF;
        line-height: 36px;
        padding: 0;
        border-color: #2E9FFF;
        border-top-right-radius: 8px!important;
        border-bottom-right-radius: 8px!important;
    }

    .preview {
        display: block;
        height: 72px;
        width: 196px;
        position: relative;
        background-color: #f7f7f7;  
    }

    .logo-preview {
        display: block;
        height: 72px;        
    }

    .logo-preview img {
        height: 100%;
    }

    .preview .upload-preview-tip {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin-top: 30px;
        width: 196px;
        text-align: center;
        color: #bbbbbb;
        font-size: 12px;
        z-index: 2;
    }

    .preview img {
        position: absolute;
        left: 0;
        top: 0;
        height: 72px;
        display: block;
        z-index: 3;
    }

    .submit-btn {
        padding: 0;
        height: 32px;
        line-height: 32px;
        width: 66px;
        border-radius: 16px;
        font-size: 13px;
        color: #fff;
        background-color: #7571f9;
        border: 1px solid #7571f9;
    }
</style>

<form method="post" return="{:url('platform/setting/index')}" class="auto-submit-form">
    <div class="card-body">
        <div style="margin-bottom: 24px;"><b>基础配置</b></div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label">网站名称</label>
            <div class="form-input">
                <input class="form-control" value="{$option['title']}" name="title">
            </div>
        </div>
        <div class="form-group row" style="height: 120px;">
            <label class="col-sm-3 col-form-label">LOGO图片URL</label>
            <div class="form-input">
                <div class="input-group mb-2">
                    <input class="form-control" value="{$option['logo']}" name="logo">
                    <span class="input-group-btn upload">
                        <a class="btn btn-secondary upload-btn" href="javascript:">上传图片</a>
                    </span>
                </div>
                {if condition="empty($option['logo'])"}
                    <div class="preview">
                        <span class="upload-preview-tip">建议尺寸98&times;36</span>
                    </div>
                {else}
                <div class="logo-preview">
                    <img src="{$option['logo']}">
                </div>
                {/if}
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label">业务域名验证文件</label>
            <div class="form-input">
                <div class="input-group mb-2">
                    <input class="form-control" value="{$option['mp_verify']}" name="mp_verify">
                    <span class="input-group-btn upload">
                        <a class="btn btn-secondary mp_verify" href="javascript:">上传文件</a>
                    </span>
                </div>
            </div>
        </div>

        <div class="form-group row">
            <label class="col-sm-3 col-form-label">底部版权信息</label>
            <div class="form-input">
                <input class="form-control" value="{:htmlspecialchars($option['copyright'])}"
                       name="copyright">
            </div>
        </div>

        <div class="form-group row" style="height: 120px;">
            <label class="col-sm-3 col-form-label">登录页背景图</label>
            <div class="form-input">
                <div class="input-group mb-2">
                    <input class="form-control" value="{$option['passport_bg']}" name="passport_bg">
                    <span class="input-group-btn upload">
                        <a class="btn btn-secondary upload-passport-btn" href="javascript:">上传图片</a>
                    </span>
                </div>
<!--                 <div style="display: inline-block;background: #fff;border: 1px solid #e3e3e3">
                    <img src="{$option['passport_bg']}" class="passport-preview"
                         style="height: 50px;width: auto;display: inline-block" alt="请上传图片">
                </div> -->
                <div class="preview">
                    <span class="upload-preview-tip">建议尺寸1920&times;1080</span>
                    {if condition="!empty($option['passport_bg'])"}
                        <img style="width: 196px" src="{$option['passport_bg']}" class="passport-preview">
                    {/if}
                </div>
            </div>
        </div>



        <hr>
        <div class="mb-3">
            <div style="margin-bottom: 6px;"><b>短信配置（阿里云）</b></div>
            <div class="text-muted fs-sm">用于已设置手机号的账户修改密码</div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label">AccessKeyId</label>
            <div class="col-sm-6">
                <input class="form-control" value="{$option['ind_sms']['aliyun']['access_key_id']}"
                       name="ind_sms[aliyun][access_key_id]">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label">AccessKeySecret</label>
            <div class="col-sm-6">
                <input class="form-control" value="{$option['ind_sms']['aliyun']['access_key_secret']}"
                       name="ind_sms[aliyun][access_key_secret]">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label">短信签名</label>
            <div class="col-sm-6">
                <input class="form-control" value="{$option['ind_sms']['aliyun']['sign']}"
                       name="ind_sms[aliyun][sign]">
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label">验证码模板ID</label>
            <div class="col-sm-6">
                <input class="form-control" value="{$option['ind_sms']['aliyun']['tpl_id']}"
                       name="ind_sms[aliyun][tpl_id]">
                <div class="text-muted fs-sm">模板示例：您的验证码是${code}</div>
            </div>
        </div>

        <div class="form-group row">
            <label class="col-sm-3"></label>
            <div class="form-input offset-sm-3">
                <a class="btn btn-primary submit-btn" href="javascript:">保存</a>
            </div>
        </div>

    </div>
</form>
<script>
    $('.upload-btn').plupload({
        url: "{:url('upload/image')}",
        success: function (e, res, status) {
            res = JSON.parse(res);
            if (res.code == 0) {
                $('input[name=logo]').val(res.data.url);
                $('.logo-preview').attr('src', res.data.url);
            } else {
                $.myToast({
                    content: res.msg,
                });
            }
        },
    });

    $('.mp_verify').plupload({
        url: "{:url('upload/file')}",
        success: function (e, res, status) {
            res = JSON.parse(res);
            if (res.code == 0) {
                $('input[name=mp_verify]').val(res.data.url);
            } else {
                $.myToast({
                    content: res.msg,
                });
            }
        },
    });

    $('.upload-passport-btn').plupload({
        url: "{:url('upload/image')}",
        success: function (e, res, status) {
            res = JSON.parse(res);
            if (res.code == 0) {
                $('input[name=passport_bg]').val(res.data.url);
                $('.passport-preview').attr('src', res.data.url);
            } else {
                $.myToast({
                    content: res.msg,
                });
            }
        },
    });
</script>